<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色属性</title>
    <script src="../res/vue2.js"></script>
    <link rel="stylesheet" href="../css/body.css">
</head>

<body>
    <div id="app">
        <img class="bg-ui" src="../res/body/box.png">
        <img class="body-show" :src="data.show" onerror="this.onerror=null; this.src='../res/body/share/test.png'">
        <div class="content">
            <div class="title-box">
                <h1 class="title"><span>◆</span>&nbsp;&nbsp;{{data.title}}&nbsp;&nbsp;<span>◆</span></h1>
            </div>
            <div class="slot-1">
                <span class="slot-1-text">UID {{data.id}}</span>
            </div>
            <div class="slot-2">
                <span class="slot-2-text">未开·基因锁</span>
            </div>
            <div class="slot-3">
                <span class="slot-3-text">{{data.nickName}}</span>
            </div>
            <div class="slot-4">
                <div class="total-power">
                    <span class="total-title">战力</span>
                    <span class="power-value">{{data.power}}</span>
                </div>
                <div v-for="(attribute, index) in data.attributes" :class="'attribute w-' + (index > 5 ? 5 : index)">
                    <div class="attribute-item">
                        <span class="key">{{attribute.key}}</span>
                        <span class="value">{{attribute.val.toFixed(2)}}{{attribute.Percents ? '%' : ''}}</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress"
                            :style="'width: ' + (attribute.val > 0 ? (Math.min(attribute.val / attribute.max, 1) * 100) : 0) + '%;'">
                        </div>
                    </div>
                </div>
            </div>
            <div class="solt-5">
                <img src="../res/body/title/test.png">
            </div>
            <div class="solt-6">
                <div class="total-power">
                    <span class="total-title">Lv.等级</span>
                    <span class="power-value">{{data.level}}</span>
                </div>
                <div class="attribute w-5">
                    <div class="attribute-item">
                        <span class="key">生命值</span>
                        <span class="value">{{data.hp[0].toFixed(2)}}/{{data.hp[1].toFixed(2)}}</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress"
                            :style="'width: ' + (data.hp[0] > 0 ? (Math.min(data.hp[0] / data.hp[1], 1) * 100) : 0) + '%; background-color: #ce0303;'">
                        </div>
                    </div>
                    <div class="attribute-item">
                        <span class="key">经验值</span>
                        <span class="value">{{data.exp[0].toFixed(2)}}/{{data.exp[1].toFixed(2)}}</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress"
                            :style="'width: ' + (data.exp[0] > 0 ? (Math.min(data.exp[0] / data.exp[1], 1) * 100) : 0) + '%; background-color: #2196F3;'">
                        </div>
                    </div>
                </div>
            </div>
            <div class="solt-7">
                <span v-for="talent in data.talent">{{talent}}</span>
            </div>
        </div>
    </div>
    <script>
        let data = {title:"宿主档案",show:"",power:400,id:"035",nickName:"匿名",level:1,attributes:[{key:"物理攻击",val:10,max:10,Percents:false}],hp:[100,100],exp:[0,10],talent:['???']};
        new Vue({
            el: '#app',
            data: {
                data: data
            },
            mounted() {
                this.data = data;
            },
            methods: {

            }
        });
    </script>

</body>